<template>
  <NavBarVue title="发布内容"/>
  <view class="issue">
    <view class="content">
      <GridFileVue :isShowCamera="isShowCamera" :showList="fileList" :isShowDot="isShowDot"/>
      <view class="title">
        <input type="text" placeholder="填写标题会有更多赞哦~" placeholder-style="color: #6D6D6D;font-size: 34rpx;"
               v-model="contentDetails.articleTitle"/>
      </view>
      <textarea cols="30" rows="10" placeholder="添加正文"
                placeholder-style="color: #9D9D9D;font-size: 26rpx;font-weight: 36rpx;"
                v-model="contentDetails.articleDetail"></textarea>
      <view class="topic">
        <view class="topic_mark" @click="showPupop">
          <view class="choose-label">
            <text># 选择话题</text>
          </view>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <view class="choose-label">
          <text>
            # {{ chooseLabellist + ':' + chooseChildLabellist }}
          </text>
        </view>
        <up-popup :show="show" mode="bottom" @close="close" class="tag-popup">
          <view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx;align-items: center;">
            <text style="font-size: 14px;color: #a09fa4;" @click="close">取消</text>
            <text style="font-size: 16px;">选择话题标签</text>
            <text style="font-size: 14px;" @click="close">确定</text>
          </view>
          <view class="topic_label">
            <view class="u-wrap">
              <view class="u-menu-wrap">
                <scroll-view scroll-y scroll-with-animation class="u-tab-view" :scroll-top="scrollTop"
                             :scroll-into-view="itemId">
                  <view v-for="(item,index) in labelList" :key="index" class="u-tab-item"
                        :class="[current == index ? 'u-tab-item-active' : '']" @click.stop="swichMenu(index, item)">
                    <text class="u-line-1">{{ item }}</text>
                  </view>
                </scroll-view>
                <scroll-view scroll-y scroll-with-animation class="page-view" :scroll-top="scrollTop"
                             :scroll-into-view="itemId">
                  <view v-for="(item,index) in labelChildList" :key="index" class="u-tab-child-item"
                        :class="[currentChild == index ? 'u-tab-item-active' : '']"
                        @click.stop="swichChildMenu(index, item)">
                    <text class="u-line-1">{{ item }}</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
        </up-popup>
      </view>
      <up-input placeholder="输入店铺引流名称" border="bottom" clearable v-model="contentDetails.activityWord"
                maxlength="30">
        <template #suffix>
          {{ contentDetails.activityWord.length }}/{{ 30 }}
        </template>
      </up-input>
      <combox-search emptyTips="无数据" :candidates="candidates" placeholder="请选择店铺" @selectorClick="selectorClick"
                     @onChange="onchange">
      </combox-search>
    </view>
    <button class="btn" :style="{bottom: safeAreaBottom + 'rpx'}" @click="publish_note">发布笔记</button>
  </view>
</template>

<script setup>
import {
  onLoad,
  onShow
} from "@dcloudio/uni-app"
import {
  onMounted,
  reactive,
  ref,
  computed
} from "vue"
import GridFileVue from "@/components/GridFile.vue";
import {
  useArticleStore,
  useShopStore,
  useTagLibraryStore
} from '@/store'
import {
  safeAreaBottom
} from '@/utils/getMenuData'
import {
  useCheckIfFileIsImageOrVideo
} from '@/utils/useCheckIfFileIsImageOrVideo'
import {
  MAP_KEY
} from "@/config/config.ts"
import comboxSearch from "@/components/combox.vue"
import tabFloor from '@/components/TabFloor.vue'

// 弹框
const show = ref(false);

function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false;
  contentDetails.articleLabel = chooseChildLabellist.value
}

function showPupop() {
  console.log("showPupop");
  show.value = true
}

const fileList = ref([])
const isShowCamera = ref(false)
const isShowDot = ref(false)
const articleStore = useArticleStore()
const shopStore = useShopStore()
onLoad((option) => {
  if (option?.item) {
    fileList.value = JSON.parse(option?.item)
  }
  const res = wx.getSystemInfoSync()
})
const contentDetails = reactive({
  accessCount: 0,
  activityId: 0,
  activityWord: "",
  articleCategoryId: 0,
  articleCover: "",
  articleDetail: "",
  articleDigest: "",
  articleLabel: "",
  articleMainPic: "",
  articleStatus: 1,
  articleTitle: "",
  favoriteCount: 0,
  latitude: "",
  likeCount: 0,
  longitude: "",
  shopId: 1,
  source: 1,
})

onMounted(async () => {
  const res = await uni.getLocation({
    type: "wgs84"
  })
  contentDetails.latitude = res.latitude
  contentDetails.longitude = res.longitude
  await shopStore.shopGetAll({
    pageNo: 1,
    pageSize: 100,
  })
  contentDetails.articleLabel = chooseChildLabellist.value
})


let candidates = computed(() => {
  return shopStore.shopInfoData.shopList.map((item) => item.storeName).filter((item) => item.includes(storeName
      .value))
})

let storeName = ref('')
const onchange = async (newVal) => {
  // await shopStore.shopGetAll({
  // 	businessId: 28,
  // 	pageNo: 1,
  // 	pageSize: 100,
  // 	storeName: newVal
  // })
  storeName.value = newVal
}

/*  #ifdef  MP-WEIXIN  */
const citySelector = requirePlugin('citySelector');
const showLocation = ref([])
onShow(() => {
  const selectedCity = citySelector.getCity();
  if (!selectedCity) {
    const locationInfo = uni.getStorageSync("locationData")
    showLocation.value.push(locationInfo?.name)
  } else {
    showLocation.value.push(selectedCity?.name)
    contentDetails.longitude = selectedCity?.location?.longitude
    contentDetails.latitude = selectedCity?.location?.latitude
  }
})
/* #endif */
const getLocation = async () => {
  let referer = 'aaa';
  const hotCitys = '北京,上海,天津,重庆,广州,深圳,成都,杭州'
  let endPoint = JSON.stringify({ //终点
    'name': '',
    'latitude': '',
    'longitude': '',
  });
  wx.navigateTo({
    url: `plugin://citySelector/index?key=${MAP_KEY}&referer=${referer}&hotCitys=${hotCitys}`,
  })
}
const publish_note = async () => {
  contentDetails.articleCover = fileList.value[0]?.url
  contentDetails.articleMainPic = fileList.value?.slice(1).map((item) => item.url)
  await articleStore.articleInsert({
    ...contentDetails
  })
  uni.showModal({
    content: '发布成功',
    showCancel: false,
    confirmText: '返回首页',
    confirmColor: '#b2b2b2',
    success: () => {
      uni.switchTab({
        url: "/pages/tab-index/index"
      })
    }
  })
}
// 获取选择的店铺的名称
const selectorClick = (idx) => {
  let shopId = shopStore.shopInfoData.shopList.find((item) => item.storeName === candidates.value[idx]).id
  contentDetails.shopId = shopId
}
// 选择Label
const active = ref(0)
const checkLable = (labelName, key) => {
  active.value = key
  contentDetails.articleLabel = labelName
}

const current = ref(0)
const currentChild = ref(0)
const tagLibraryStore = useTagLibraryStore()
onMounted(async () => {
  await tagLibraryStore.articleList()
  await tagLibraryStore.articleAllList()
  swichMenu(current.value, Object.keys(tagLibraryStore?.contentTagList?.articleAllList)[current.value])
})
const labelList = computed(() => {
  return Object.keys(tagLibraryStore?.contentTagList?.articleAllList)
})

const labelChildList = ref(null)
const chooseLabellist = ref('')
const chooseChildLabellist = ref('')
const swichMenu = (index, tagName) => {
  chooseLabellist.value = ''
  current.value = index;
  labelChildList.value = tagLibraryStore?.contentTagList?.articleAllList[tagName].map((label) => {
    return label.tagLibraryBO.tagName
  })
  chooseLabellist.value = tagName
  // console.log(chooseLabellist.value, "| chooseLabellist----");
  swichChildMenu(currentChild.value)
}

const swichChildMenu = (index) => {
  chooseChildLabellist.value = ''
  chooseChildLabellist.value = labelChildList.value[index]
  // console.log(chooseChildLabellist.value, "| chooseChildLabellist---=");
  currentChild.value = index;
}
</script>

<style lang="scss" scoped>
.issue {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content {
    width: 100%;
    height: auto;
    padding-bottom: 180rpx;
  }

  .title {
    position: relative;
    margin-top: 20rpx;
    height: 60rpx;
    font-size: 34rpx;
    color: #6D6D6D;
    border-bottom: 1px solid #D2D2D2;

    input {
      width: 100%;
      height: 48rpx;
      line-height: 48rpx;
    }
  }

  textarea {
    width: 100%;
    margin-top: 40rpx;
    font-weight: 400;
    font-size: 26rpx;
    color: #9D9D9D;
    line-height: 36rpx;
    color: #9D9D9D;
  }

  .topic {
    display: flex;
    flex-direction: column;
    margin-bottom: 60rpx;

    .topic_mark {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

    }

    .topic_label {
      height: 50vh;
      // text {
      // 	display: inline-block;
      // 	background-color: #F4F4F4;
      // 	margin: 10rpx;
      // 	padding: 10rpx 20rpx;
      // 	border-radius: 30rpx;
      // 	font-size: 24rpx;
      // 	color: #6D6D6D;
      // 	&.active {
      // 		background-color: #FF4D65;
      // 		color: #fff;
      // 	}
      // }
    }
  }

  .local {
    display: flex;
    flex-direction: column;
    margin-top: 20rpx;
    margin-bottom: 40rpx;

    .local_mark {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .local_position {
        display: flex;
        align-items: center;

        text {
          margin-left: 10rpx;
          color: #222222;
          font-size: 24rpx;
          font-weight: bold;
        }
      }
    }

    .local_label {
      margin-top: 20rpx;
      margin-bottom: 40rpx;

      text {
        background-color: #F4F4F4;
        color: #6D6D6D;
        margin: 10rpx;
        padding: 10rpx 20rpx;
        border-radius: 30rpx;
        font-size: 24rpx;
      }
    }
  }

  .btn {
    width: 90%;
    background: rgb(254, 92, 113);
    color: white;
    position: fixed;
    left: 30rpx;
    z-index: 99;
  }

  .pupop-box {
    height: 50vh;
  }
}

.u-wrap {
  height: calc(100vh);
  /* #ifdef H5 */
  height: calc(100vh - var(--window-top));
  /* #endif */
  display: flex;
  flex-direction: column;
}

.u-menu-wrap {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.u-tab-view {
  width: 200rpx;
  height: 100%;
}

.u-tab-item {
  height: 110rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-child-item {
  height: 110rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: #444;
  font-weight: 400;
  line-height: 1;
}

.u-tab-item-active {
  position: relative;
  color: #FE5C71;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-class-item-active {
  position: relative;
  color: #000;
  font-size: 30rpx;
  font-weight: 600;
  background: #fff;
}

.u-class-item-active::before {
  content: "";
  position: absolute;
  border-left: 4px solid $u-primary;
  height: 32rpx;
  left: 0;
  top: 39rpx;
}

.u-tab-view {
  height: 100%;
}

.page-view {
  height: 100%;
  padding: 16rpx;
  background: #fff;
}

.item-title {
  font-size: 26rpx;
  color: $u-main-color;
  font-weight: bold;
}

.topic :global(.u-popup__content) {
  border-radius: 20rpx 20rpx 0 0;
  background-color: #f7f7f7 !important;
}

.choose-label {
  margin-bottom: 10rpx;

  text {
    background-color: #F4F4F4;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #6D6D6D;
  }
}
</style>